<script setup lang="ts">
defineOptions({
  name: "userInfo",
});
</script>

<template>
  <div
    class="w-[330px] h-full flex flex-col ml-6 bg-white rounded-lg overflow-hidden py-8 px-4"
  >
    <div class="flex items-center">
      <el-avatar
        :size="80"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
      <div class="ml-2">
        <div class="font-bold">您好！小果盘！</div>
        <div class="text-sm mt-2 text-gray-500">ID :16515651265</div>
      </div>
    </div>

    <div class="grid grid-cols-2 gap-5 mt-6">
      <el-button type="primary">编辑资料</el-button>
      <el-button>切换账号</el-button>
    </div>

    <div class="grid grid-cols-3 mt-6">
      <div class="fccp">
        <Icon name="icon-park-outline:message-one" class="text-2xl" />
        <div class="mt-2">我的消息</div>
      </div>
      <div class="fccp">
        <Icon name="icon-park-outline:like" class="text-2xl" />
        <div class="mt-2">商品收藏</div>
      </div>
      <div class="fccp">
        <Icon name="icon-park-outline:concern" class="text-2xl" />
        <div class="mt-2">企业关注</div>
      </div>
    </div>

    <div class="grid grid-cols-2 mt-6">
      <div class="flex flex-col">
        <div class="msg-title">公告</div>
        <ul class="mes-content text-sm">
          <li class="my-4">用户服务协议修订</li>
          <li class="my-4">隐私政策修订</li>
          <li class="my-4">隐私政策修订公告</li>
        </ul>
      </div>
      <div class="flex flex-col">
        <div class="msg-title">云资讯</div>
        <ul class="mes-content text-sm">
          <li class="my-4">用户服务协议修订</li>
          <li class="my-4">隐私政策修订</li>
          <li class="my-4">隐私政策修订公告</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fccp {
  @apply flex flex-col items-center justify-center cursor-pointer;
}

.msg-title {
  background: linear-gradient(to right, #ffe88b, #ffc584);
  width: 80px;
  border-radius: 10px 5px 10px 5px;
  text-align: center;
  padding: 2px 0;
}
.mes-content {
  li {
    display: flex;
    align-items: center;
    &::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background: #666666;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
</style>
